<div class="row">
    <div id="carousel-main" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for carousel in carousel_list %}
                <li data-target="carousel-main" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}
                    class="active"
                {% endif %} ></li>
            {% endfor %}
        </ol>
        <div class="carousel-inner" role="listbox">
            {% for carousel in carousel_list %}
                <div class="item {% if forloop.first %}
                    active
                {% endif %} ">
                    <a href="{{ carousel.target_url }}" target="_blank"><img src="{% url 'media' carousel.img %}" alt="slide-pic" class="slider-img"></a>
                    <div class="carousel-caption">
                        {% if carousel.title %}
                            <h3>{{ carousel.title }}</h3>
                        {% endif %}
                        {% if carousel.summery %}
                            <p>{{ carousel.summery }}</p>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
        <a href="#carousel-main" class="left carousel-control" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a href="#carousel-main" class="right carousel-control" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>
</div>